<!DOCTYPE html>


<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>侧边展开导航栏</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/Homepage.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.4/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>

<body>
<div class="navbar">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">
        <i class="fa fa-bars" aria-hidden="true"></i>
    </label>
    <ul>
        <li>
            <img src="../images/1.png" alt="">
            <span>欢迎您！{{user.nickname}}</span>
        </li>
        <li>
            <a href="Manager-bubble-Homepage.html">
                <i class="fa fa-home" aria-hidden="true"></i>
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="Manager-Info-Page.html">
                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                <span>个人中心</span>
            </a>
        </li>
        <li>
            <a href="Manager-Buy-Page.html">
                <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                <span>购买广告</span>
            </a>
        </li>
        <li>
            <a href="Manager-user-list.html">
                <i class="fa fa-users" aria-hidden="true"></i>
                <span>用户列表</span>
            </a>
        </li>
        <li>
            <a href="Manager-advlist.html">
                <i class="fa fa-sitemap" aria-hidden="true"></i>
                <span>广告列表</span>
            </a>
        </li>
        <li>
            <a href="Manager-Chat-Page.html">
                <i class="fa fa-comments" aria-hidden="true"></i>
                <span>聊天窗口</span>
            </a>
        </li>
        <li onclick="Logout()">
            <a href="javascript:void(0)">
                <i class="fa fa-sign-out" aria-hidden="true" style="transform: rotate(180deg);"></i>
                <span>退出登录</span>
            </a>
        </li>
    </ul>

<!--    用户列表及广告列表展示区-->
    <div class="main">
        <div style="height: 100%; width: 100%; display: none" id="user">
            <iframe src="Manager-user-list.html" style="width: 100%;height: 100%; border: medium none;"></iframe>
        </div>
        <div style="height: 100%; width: 100%; display: none" id="ad">
            <iframe src="Manager-advlist.html" style="width: 100%;height: 100%; border: medium none;"></iframe>
        </div>
    </div>

</div>

</div>
</body>

<!--<script src="js/GetInfo.js"></script>-->

<script>

    function Logout() {
        var flag = window.confirm("确定退出登录吗？");
        if (flag) {
            window.location.href = "AdInfo?type=logout";
        }
    }
    function showContent(id) {
        var elements = document.querySelectorAll('.main > div'); // 获取所有显示内容的元素
        elements.forEach(function (element) { // 遍历元素
            if (element.id === id) { // 如果元素的id与目标id相同，则显示
                element.style.display = 'block';
            } else { // 否则隐藏
                element.style.display = 'none';
            }
        });
    }

    new Vue({
        el: '#app',
        methods: {
            showMessage(i) {
                if (i === 1)
                    this.$message("123123");
                else {
                    this.$message({
                        message: '这是一条警告消息',
                        type: 'warning'
                    });
                }
            }
        }
    });

    new Vue({
        el: '#ad',
        data() {
            return {
                value: new Date()
            }
        }
    })
</script>
</html>
